<template>
  <div class="my-coupons">
    <!-- 顶部导航栏 -->
    <header class="page-header">
      <back-icon />
      <div class="title">我的优惠券</div>
      <router-link to="/history" class="history-link">历史记录</router-link>
    </header>

    <!-- 选项卡导航 -->
    <div class="tab-nav">
      <div 
        v-for="tab in tabs" 
        :key="tab.value"
        :class="['tab-item', { active: currentTab === tab.value }]"
        @click="handleTabChange(tab.value)"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 领券入口 -->
    <div class="coupon-entry">
      <div class="entry-left">
        <img src="@/assets/coupon-icon.png" alt="领券" class="entry-icon">
        <span>领更多好券</span>
      </div>
      <router-link to="/coupon-center" class="entry-right">
        领券中心 >
      </router-link>
    </div>

    <!-- 优惠券列表 -->
    <div class="coupon-list">
      <!-- 当前优惠券 -->
      <div class="coupon-item">
        <div class="coupon-amount">
          <span class="amount-symbol">¥</span>
          <span class="amount-value">74</span>
          <span class="amount-type">无门槛</span>
        </div>
        <div class="coupon-info">
          <div class="coupon-desc">全场通用(除话费、跨境等特殊商品)</div>
          <div class="coupon-date">2024.12.20-2074.12.20</div>
        </div>
        <div class="coupon-action">
          <button class="use-btn">立即使用</button>
          <div class="expand-icon">∨</div>
        </div>
      </div>

      <!-- 优惠券说明 -->
      <div class="coupon-tips">
        优惠券说明
        <i class="question-icon">?</i>
      </div>

      <!-- 推荐好券 -->
      <div class="recommend-section">
        <div class="section-header">
          <div class="section-title">
            <i class="heart-icon">♥</i>
            推荐好券
          </div>
          <div class="section-subtitle">人工比价 券后更低</div>
        </div>

        <!-- 推荐商品列表 -->
        <div class="product-list">
          <div class="product-item" v-for="product in recommendProducts" :key="product.id">
            <img :src="product.image" :alt="product.title" class="product-image">
            <div class="product-content">
              <div class="product-tags">
                <span v-if="product.festival" class="festival-tag">{{ product.festival }}</span>
                <span class="shipping-tag">退货包运费</span>
              </div>
              <div class="product-title">{{ product.title }}</div>
              <div class="product-price">
                <span>券后价 ¥{{ product.discountPrice }}</span>
                <div class="claim-progress">券已领{{ product.claimProgress }}%</div>
              </div>
              <div class="product-coupon">
                <span class="coupon-tag">¥{{ product.couponAmount }}</span>
                <span class="no-threshold">无门槛券</span>
                <button class="claim-btn">立即领取</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getPlatformCoupons, claimCoupon } from '@/api/coupon'
import BackIcon from '@/components/BackIcon.vue'

const currentTab = ref('platform')
const loading = ref(false)
const hasMore = ref(true)
const page = ref(1)
const size = ref(10)
const coupons = ref([])

const tabs = [
  { label: '全部', value: 'all' },
  { label: '即将过期', value: 'expiring' },
  { label: '平台券', value: 'platform' },
  { label: '店铺券', value: 'store' },
  { label: '多多支付优惠', value: 'payment' }
]

const recommendProducts = [
  {
    id: 1,
    title: '家适用小米智能插座',
    image: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/226385/13/32284/55363/67b2ee68F33b583b8/6badb4b01e02a08e.jpg.avif',
    discountPrice: '7.24',
    claimProgress: 17,
    couponAmount: 20,
    shipping: true
  },
  {
    id: 2,
    festival: '情人节',
    title: '回力运动鞋男',
    image: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/226385/13/32284/55363/67b2ee68F33b583b8/6badb4b01e02a08e.jpg.avif',
    discountPrice: '44.9',
    claimProgress: 26,
    couponAmount: 31,
    shipping: true
  },
  {
    id: 3,
    festival: '情人节',
    title: '雪山袜子男款',
    image: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/226385/13/32284/55363/67b2ee68F33b583b8/6badb4b01e02a08e.jpg.avif',
    discountPrice: '3.01',
    claimProgress: 91,
    couponAmount: 10,
    shipping: true
  }
]

// 获取优惠券列表
const fetchCoupons = async () => {
  try {
    loading.value = true
    const params = {
      page: page.value,
      size: size.value,
      status: currentTab.value === 'expiring' ? 'expiring' : undefined
    }
    
    const res = await getPlatformCoupons(params)
    if (page.value === 1) {
      coupons.value = res.list
    } else {
      coupons.value.push(...res.list)
    }
    
    hasMore.value = res.total > coupons.value.length
  } catch (error) {
    console.error('获取优惠券失败：', error)
  } finally {
    loading.value = false
  }
}

// 切换标签
const handleTabChange = async (tab) => {
  currentTab.value = tab
  page.value = 1
  await fetchCoupons()
}

// 下拉刷新
const onRefresh = async () => {
  page.value = 1
  await fetchCoupons()
}

// 加载更多
const loadMore = async () => {
  if (loading.value || !hasMore.value) return
  page.value++
  await fetchCoupons()
}

// 领取优惠券
const handleClaim = async (couponId) => {
  try {
    await claimCoupon(couponId)
    // 刷新列表
    await fetchCoupons()
  } catch (error) {
    console.error('领取优惠券失败：', error)
  }
}

onMounted(() => {
  fetchCoupons()
})
</script>

<style scoped>
.my-coupons {
  background: #f5f5f5;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
}

.page-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 44px;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}

.history-link {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.tab-nav {
  display: flex;
  background: #fff;
  overflow-x: auto;
  position: sticky;
  top: 44px;
  z-index: 99;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.tab-nav::-webkit-scrollbar {
  display: none;
}

.tab-item {
  padding: 12px 16px;
  font-size: 14px;
  white-space: nowrap;
  color: #333;
  position: relative;
}

.tab-item.active {
  color: #f23030;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: #f23030;
}

.coupon-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
}

.entry-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entry-icon {
  width: 24px;
  height: 24px;
}

.entry-right {
  color: #999;
  text-decoration: none;
}

.coupon-item {
  margin: 12px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  padding: 16px;
}

.coupon-amount {
  display: flex;
  align-items: baseline;
  color: #f23030;
  margin-right: 12px;
}

.amount-symbol {
  font-size: 16px;
}

.amount-value {
  font-size: 32px;
  font-weight: bold;
}

.amount-type {
  font-size: 12px;
  margin-left: 4px;
}

.coupon-info {
  flex: 1;
}

.coupon-desc {
  font-size: 14px;
  margin-bottom: 4px;
}

.coupon-date {
  font-size: 12px;
  color: #999;
}

.use-btn {
  background: #f23030;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.recommend-section {
  margin: 12px;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f23030;
  font-size: 16px;
  font-weight: 500;
}

.section-subtitle {
  font-size: 12px;
  color: #999;
  margin-left: 8px;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-item {
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.product-content {
  flex: 1;
}

.product-tags {
  margin-bottom: 4px;
}

.festival-tag {
  background: #ffd6e0;
  color: #f23030;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 12px;
  margin-right: 4px;
}

.shipping-tag {
  color: #999;
  font-size: 12px;
}

.product-title {
  font-size: 14px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #f23030;
}

.claim-progress {
  font-size: 12px;
  color: #999;
}

.product-coupon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coupon-tag {
  color: #f23030;
  border: 1px solid #f23030;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 12px;
}

.no-threshold {
  font-size: 12px;
  color: #999;
}

.claim-btn {
  margin-left: auto;
  background: #f23030;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .product-image {
    width: 80px;
    height: 80px;
  }

  .coupon-item {
    margin: 12px;
    padding: 12px;
  }

  .amount-value {
    font-size: 28px;
  }

  .coupon-desc {
    font-size: 13px;
  }

  .coupon-date {
    font-size: 11px;
  }

  .use-btn {
    padding: 4px 10px;
    font-size: 13px;
  }

  .recommend-section {
    margin: 12px;
    padding: 12px;
  }

  .product-title {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .product-price {
    font-size: 13px;
  }

  .claim-progress {
    font-size: 11px;
  }

  .coupon-tag {
    font-size: 11px;
  }

  .no-threshold {
    font-size: 11px;
  }

  .claim-btn {
    padding: 4px 10px;
    font-size: 13px;
  }
}
</style> 